<template>
	<view class="center">	
	  
		<view class="page-body">
	        <view class="page-section page-section-gap">
					<map  :latitude="latitude" :longitude="longitude" :markers="markers" @markertap="markertap">
	                </map>				
	        </view>
	    </view>
		
		
		<s-popup class="pop" custom-class="demo-popup" position="bottom" v-model="visible">		  		  	  
		<view class="container">
		<navigator :url="'../discover/houseDetail?house_id='+item.id" v-for="(item,index) in houseList">
		 <view class="visitprint" >			
		 		<image v-if="item.image" class="left" :src="siteUrl+item.image"></image>
				<image v-else class="left" :src="siteUrl+item.images.split(',',1)"></image>
		 		<view class="right">
		 			<view class="title">
		 				{{item.title}}
		 			</view>
		 			<view class="location">
		 				<image src="/static/img/icon-location.png"></image>
		 				<view class="note">{{item.location_near}}</view>
		 			</view>
		 			<view class="price">
		 				<font style="font-size:40rpx;color:#FF635C">{{item.price}}</font>元/月
		 			</view>				
		 		</view>		
		 </view>
		 </navigator>
		</view>		 	  		  
		</s-popup>
	
	</view>
</template>

<script>
	var _self;
	import sPopup from '@/components/s-popup/index.vue'
	var util = require('../../common/util.js');
	var formatLocation = util.formatLocation;
	
	
	export default {
		components: {
		   sPopup,
		 },
		data() {
			return {
				keywords:'',
				location: {},
				locationAddress: '',
				visible:false,
				houseList:{},
				siteUrl:this.websiteUrl,
				title: 'map',
				latitude:0,
				longitude:0,
				markers: [],
				/*markers: [{
					id:1,
				    width : 40,
				    height: 40,
				    latitude: 39.989631,
				    longitude: 116.481018,
				    iconPath: '/static/icon/location.png',
					callout: {
					    content: '方恒国际 阜通东大街6号',
					    color: '#00BFFF',
					    fontSize: 10,
					    borderRadius: 4,
					    borderWidth: 1,
					    borderColor: '#333300',
					    bgColor: '#CCFF99',
					    padding: '5',
					    display: 'BYCLICK'
					}
				 },
				 {
					 id:2,
				     width : 40,
				     height: 40,
				     latitude: 39.969531,
				     longitude: 116.481118,
				     iconPath: '/static/icon/location.png',
				 	callout: {
				 	    content: '测试',
				 	    color: '#00BFFF',
				 	    fontSize: 10,
				 	    borderRadius: 4,
				 	    borderWidth: 1,
				 	    borderColor: '#333300',
				 	    bgColor: '#CCFF99',
				 	    padding: '5',
				 	    display: 'BYCLICK'
				 	}
				  },
				  {
					 id:3,
				     width : 40,
				     height: 40,
				     latitude: 39.96531,
				     longitude: 116.431118,
				     iconPath: '/static/icon/location.png',
				 	callout: {
				 	    content: '测试2',
				 	    color: '#00BFFF',
				 	    fontSize: 10,
				 	    borderRadius: 4,
				 	    borderWidth: 1,
				 	    borderColor: '#333300',
				 	    bgColor: '#CCFF99',
				 	    padding: '5',
				 	    display: 'BYCLICK'
				 	}
				  },				 
				 ]*/
			}			
		},
		onLoad(e) {
			_self = this
			uni.getLocation({
			            type: 'wgs84',
			            success: function(res) {			    
							_self.longitude = res.longitude
							_self.latitude = res.latitude
			               
			            }
			});
			this.getMarkers()	
			
			
			
			
			
	
			//if(_self.locationAddress){
				//_self.keywords = e.keywords
				//let webView =this.$mp.page.$getAppWebview();
				//webView.setTitleNViewSearchInputText(_self.locationAddress)	 
			//}	
		},
		//onNavigationBarSearchInputClicked(){
			//uni.navigateTo({
			//	url:'../../discover/index'
			//})
			
		//},
		onNavigationBarButtonTap(e){
			this.chooseLocation()
			
		},
		
		methods: {
			getMarkers(){
				uni.request({
					url: this.websiteUrl+'/userapi.php/house/markers',
					method: 'GET',
					data: {},
					success: res => {
						
						_self.markers = res.data.data
						
						
					},
					
				});
				
			},
			chooseLocation: function () {
				uni.chooseLocation({
					success: (res) => {
						this.hasLocation = true,
						this.location = formatLocation(res.longitude, res.latitude),
						
						
						//this.locationAddress = res.address		
							_self.longitude = parseFloat(this.location.longitude[0])+parseFloat(this.location.longitude[1]/60)
														
						_self.latitude = parseFloat(this.location.latitude[0])+parseFloat(this.location.latitude[1]/60)																																												
					}
				})
			},
			markertap: function(e) {
								
				uni.request({
					url: this.websiteUrl+'/userapi.php/house/mapSearch?house_id='+e.detail.markerId,
					method: 'POST',
					header: {
						'content-type':'application/x-www-form-urlencoded'				
					},
					data: {},
					success: res => {
						_self.visible = true
						//console.log(123)
						_self.houseList = res.data.data											
					},					
				});															
			}					
		}
}
</script>
<style>
    .center {	
		display: flex;
		flex-direction: column;
		align-items: center;
		width:100%;
	}
	
	.page-body{
		width:100%;
		height: 923rpx;
	}
	map{
		width:100%;
		height: 923rpx;
	}
	
	
	
	.visitprint{
		width:100%;
		height: 264rpx;
	}
	
	.visitprint .left{
		padding-left:32rpx;
		width:240rpx;
		height: 200rpx;
		padding-top:32rpx;
		float:left;
	}
	
	.visitprint .right{
		width:422rpx;
		height: 200rpx;
		margin-left:24rpx;
		float:left;
	}
	
	.right .title{
		font-size:30rpx;
		line-height: 42rpx;
		color:#373737;
		padding-top:32rpx;
	}
	
	.right .location{
		width:100%;
		height: 34rpx;
		margin-top:12rpx;
	}
	
	.right .location image{
		width:28rpx;
		height: 28rpx;
		float:left;
	}
	
	.right .location .note{
		float:left;
		font-size:24rpx;
		line-height: 34rpx;
		color:#999999;
		margin-left:12rpx;
	}
	
	
	.right .price{
		font-size:32rpx;
		line-height:48rpx;
		margin-top:12rpx;
		
	}
	
	
	.container{
		width:100%;
		height: 270rpx;
		
	}
	
	.pop{
		
	}
	
	
	
	
	
</style>
